<script>
  export default {
    name: 'store-account-dialog',
    data() {
      /**
       * 校验账户名称
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkAccountName = (rule, value, callback) => {
        let accountForm = this.accountForm;
        if (accountForm.type === 1 && !accountForm.name) {
          return callback(new Error('账户姓名不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户身份证号
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkAccountIdCard = (rule, value, callback) => {
        let accountForm = this.accountForm;
        if (accountForm.type === 1 && !accountForm.idCard) {
          return callback(new Error('身份证号不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户企业名称
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkEnterpriseName = (rule, value, callback) => {
        let accountForm = this.accountForm;
        if (accountForm.type === 0 && !accountForm.enterpriseName) {
          return callback(new Error('企业名称不能为空'))
        }
        // 校验通过
        callback();
      }
      /**
       * 校验账户社会统一信用代码
       * @param rule                规则对象
       * @param {number} value      最新值
       * @param {function} callback 回调函数
       */
      let checkEnterpriseNo = (rule, value, callback) => {
        let accountForm = this.accountForm;
        if (accountForm.type === 0 && !accountForm.enterpriseNo) {
          return callback(new Error('社会统一信用代码不能为空'))
        }
        // 校验通过
        callback();
      }
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 操作类型[true-修改 false-添加]
        optType: false,
        // 商店账户表单对象
        accountForm: {
          // 主键
          id: undefined,
          // 商店主键
          storeId: undefined,
          // 账户类型[0-对公  1-对私]
          type: 0,
          // 姓名
          name: undefined,
          // 身份证号
          idCard: undefined,
          // 企业名称
          enterpriseName: undefined,
          // 企业社会统一信用代码
          enterpriseNo: undefined,
          // 银行卡号
          bankNo: undefined,
          // 银行名称
          bankName: undefined,
          // 支行名称
          bankBranchName: undefined,
          // 银行预留手机号
          bankMobile: undefined,
          // 银行所在城市
          bankCity: undefined,
          // 序号
          sort: undefined,
          // 审核备注
          auditRemark: undefined
        },
        // 开户城市枚举列表
        bankCityList: [],
        // 商店账户表单校验规则对象
        accountRules: {
          type: [
            { required: true, message: '账户类型不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, validator: checkAccountName, trigger: 'blur' }
          ],
          idCard: [
            { required: true, validator: checkAccountIdCard, trigger: 'blur' }
          ],
          enterpriseName: [
            { required: true, validator: checkEnterpriseName, trigger: 'blur' }
          ],
          enterpriseNo: [
            { required: true, validator: checkEnterpriseNo, trigger: 'blur' }
          ],
          bankNo: [
            { required: true, message: '银行卡号不能为空', trigger: 'blur' }
          ],
          bankName: [
            { required: true, message: '银行名称不能为空', trigger: 'blur' }
          ],
          bankBranchName: [
            { required: true, message: '支行名称不能为空', trigger: 'blur' }
          ],
          bankMobile: [
            { required: true, message: '预留手机号不能为空', trigger: 'blur' }
          ],
          bankCity: [
            { required: true, message: '开户城市不能为空', trigger: 'change' }
          ],
          sort: [
            { required: true, message: '序号不能为空', trigger: 'blur' }
          ],
        },
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
      }
    },
    methods: {
      /**
       * 打开商店账户新增/修改弹出框方法
       * @param {boolean} optType 操作类型[true-修改 false-添加]
       * @param {Object}  store   商店对象
       * @param {Object}  account 商店账户对象
       */
      openDialog(optType, store, account) {
        // 打开弹出框
        this.visible = true;

        this.title = optType ? "修改商店账户" : "添加商店账户"
        this.optType = optType;

        let accountForm = this.accountForm;
        if (account) {
          for (let propKey in accountForm) {
            if (account.hasOwnProperty(propKey)) {
              accountForm[propKey] = account[propKey];
            }
          }
        }
        accountForm.storeId = store.id;

        // 获取枚举数据
        this.getEnumData(account);
      },
      /**
       * 获取枚举数据方法
       * @param {Object} account 商店账户对象
       */
      getEnumData(account) {
        const accountForm = this.accountForm;
        const params = {
          id: accountForm.id,
          storeId: accountForm.storeId
        }
        this.$axios.$get('/store-account/enums', { params: params })
          .then(({ data }) => {
            if (!this.optType) {
              accountForm.sort = data.sort;
            }
            this.bankCityList = data.bankCityList;
            const auditStoreDto = data.auditStoreDto;
            if (auditStoreDto && account.auditStatus === 2) {
              accountForm.auditRemark = auditStoreDto.auditRemark;

              if (auditStoreDto.type === 20) {
                // 添加商店账户
                this.optType = false;
                this.title = '添加商店账户';
              }
            }
          })
          .catch(() => {});
      },
      /**
       * 选择账户类型事件
       */
      changeAccountTypeHandle() {
        let accountForm = this.accountForm;
        if (accountForm.type === 0) {
          accountForm.name = undefined;
          accountForm.idCard = undefined;
        } else {
          accountForm.enterpriseName = undefined;
          accountForm.enterpriseNo = undefined;
        }
        // 清楚表单校验状态
        this.$refs.accountForm.clearValidate(['name', 'idCard', 'enterpriseName', 'enterpriseNo'])
      },
      /**
       * 保存商店账户事件
       */
      saveHandle() {
        this.$refs.accountForm.validate()
          .then(() => {
            // 按钮禁用
            this.buttonLoad = true;

            return this.$axios.$post('/store-account/save', this.accountForm)
          })
          .then(() => {
            this.notify('success', '操作成功', '添加商户账户成功，请等待审核');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      },
      /**
       * 修改商店账户事件
       */
      updateHandle() {
        this.$refs.accountForm.validate()
          .then(() => {
            // 按钮禁用
            this.buttonLoad = true;

            return this.$axios.$post('/store-account/update', this.accountForm)
          })
          .then(() => {
            this.notify('success', '操作成功', '修改商户账户成功，请等待审核');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      },
      /**
       * 关闭弹出框方法
       * @param {boolean | function} refresh 是否刷新父级组件数据
       */
      closeDialog(refresh) {
        // 重置表单
        this.$refs.accountForm.resetFields();
        this.accountForm.id = undefined;
        this.accountForm.storeId = undefined;
        console.log('accountForm', JSON.stringify(this.accountForm))

        if (typeof refresh === 'function') {
          refresh = false;
        }
        if (refresh) {
          // 向上传递事件
          this.$emit('refresh');
        }
        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      },
      /**
       * 审核备注分割方法
       * @param auditRemark 审核备注
       * @return {string[]} 审核备注数组
       */
      auditRemarkSplit(auditRemark) {
        if (!auditRemark) {
          return [];
        }
        return auditRemark.split("\n");
      }
    }
  }
</script>

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="43%"
    top="10vh"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    class="store-account-dialog"
  >
    <el-form size="small" :model="accountForm" :rules="accountRules" status-icon label-width="100px" ref="accountForm">
      <el-form-item v-if="accountForm.auditRemark" label="审核回复">
        <div class="auditRemark">
          <div v-for="(remark, index) in auditRemarkSplit(accountForm.auditRemark)" :key="'auditRemark' + index">
            {{ remark }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="账户类型" prop="type">
        <el-radio-group v-model="accountForm.type" @change="changeAccountTypeHandle">
          <el-radio :label="0" border>对公</el-radio>
          <el-radio :label="1" border>对私</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="accountForm.type === 1" label="账户姓名" prop="name">
        <el-input v-model="accountForm.name"
                  clearable
                  maxlength="30"
                  show-word-limit
                  placeholder="请输入账户姓名"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="accountForm.type === 1" label="身份证号" prop="idCard">
        <el-input v-model="accountForm.idCard"
                  clearable
                  maxlength="18"
                  show-word-limit
                  placeholder="请输入身份证号"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="accountForm.type === 0" label="企业名称" prop="enterpriseName">
        <el-input v-model="accountForm.enterpriseName"
                  clearable
                  maxlength="30"
                  show-word-limit
                  placeholder="请输入企业名称"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item v-if="accountForm.type === 0" label="社会统一信用代码" prop="enterpriseNo">
        <el-input v-model="accountForm.enterpriseNo"
                  clearable
                  maxlength="18"
                  show-word-limit
                  placeholder="请输入社会统一信用代码"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankNo">
        <el-input v-model="accountForm.bankNo"
                  clearable
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入银行卡号"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="银行名称" prop="bankName">
        <el-input v-model="accountForm.bankName"
                  clearable
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入银行名称"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="支行名称" prop="bankBranchName">
        <el-input v-model="accountForm.bankBranchName"
                  clearable
                  maxlength="30"
                  show-word-limit
                  placeholder="请输入支行名称"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="预留手机号" prop="bankMobile">
        <el-input v-model="accountForm.bankMobile"
                  clearable
                  maxlength="11"
                  show-word-limit
                  placeholder="请输入预留手机号"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="开户城市" prop="bankCity">
        <el-select v-model="accountForm.bankCity" filterable clearable placeholder="请选择开户城市"
                   class="width90percent">
          <el-option-group v-for="bankCityGroup in bankCityList" :key="'bankCity' + bankCityGroup.name"
                           :label="bankCityGroup.name">
            <el-option v-for="bankCity in bankCityGroup.list" :key="'bankCity' + bankCity.value"
                       :label="bankCity.name" :value="bankCity.value">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="序号" prop="sort">
        <el-input v-model="accountForm.sort"
                  clearable
                  maxlength="3"
                  show-word-limit
                  placeholder="请输入序号"
                  class="width90percent">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog(false)">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateHandle">修 改</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>
  .store-account-dialog >>> .el-dialog__body {
    padding: 20px;
  }
  .store-account-dialog .width90percent {
    width: 90%;
  }
  .store-account-dialog .auditRemark {
    max-height: 100px;
    color: #f81313;
    overflow: auto;
  }
</style>
